/**
 * Created by Jacky.gao on 2016/8/10.
 */
import React, {Component} from 'react';
import {Button, Card, Layout} from 'element-react';
import 'element-theme-default';
import "./home.css"
import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/pie'

import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/toolbox'

export default class QuickStart extends Component {
    componentDidMount() {
        // 饼图的配置
        const myPieChart = echarts.init(document.getElementById('myPieChart'));
        let option = {
            legend: {
                top: '5%',
                left: 'center'
            },
            tooltip: {},
            series: [
                {
                    name: '项目规则文件分组统计',
                    type: 'pie',
                    radius: '60%',
                    data: [
                        {value: 235, name: '车险项目',itemStyle: {color: '#5470c6'}},
                        {value: 274, name: 'xx决策项目',itemStyle: {color: '#91cc75'}}
                    ],
                }
            ]
        };
        // 设置初始饼图配置
        myPieChart.setOption(option);

        // 条状图，默认显示全部项目的规则文件数，当点击饼图时只显示选中的饼图的规则文件数
        const myBarChart = echarts.init(document.getElementById('myBarChart'));
        myBarChart.setOption({
            tooltip: {},
            xAxis: {
                type: 'category',
                data: ["库文件","向导式决策集", "脚本式决策集", "决策表", "决策树", "评分卡", "决策流","知识包"],
                axisLabel: {
                    rotate: 45, // 旋转标签，避免重叠
                    margin: 8    // 设置标签与轴线之间的距离
                }
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                barMaxWidth: '20px',
                data: [10,5, 20, 36, 10, 10, 20,5]
            }]
        });
        // 窗口变化时...
        window.addEventListener("resize", function () {
            myPieChart.resize();
            myBarChart.resize();
        });

        // 饼图点击事件监听
        myPieChart.on('click', function (params) {
            // 根据点击的饼图部分，设置条形图的数据
            //console.log(params.data);
            let choseProjectName=params.data.name;//选中的饼图名称
           // let choseProjectValue=params.data.value;//选中的饼图的数值
            let color = params.data.itemStyle.color;
            //console.log('点击的饼图扇区颜色是：' + color);//选中的饼图的颜色
            // 条形图的配置
            const barOption = {
                xAxis: {
                    type: 'category',
                    data: ["库文件","向导式决策集", "脚本式决策集", "决策表", "决策树", "评分卡", "决策流","知识包"],
                    axisLabel: {
                        rotate: 45, // 旋转标签，避免重叠
                        margin: 8    // 设置标签与轴线之间的距离
                    }
                },
                yAxis: {
                },
                color:color,
                series: [
                    {
                        name:choseProjectName,
                        type: 'bar',
                        data: [3,5, 2, 3, 4, 3, 2,1]
                    }
                ]
            };
            // 使用setOption更新图表
            myBarChart.setOption(barOption, false, false);
        });
    };

    render() {
        return (
            <div style={{
                fontSize: '14px',
                fontFamily: 'Microsoft YaHei UI, Microsoft YaHei',
                margin: '20px',
            }}>
                <div style={{
                    textAlign: "left"
                }}><h3>欢迎您使用上海锐道公司云规则引擎软件uRule</h3>
                    <div style={{marginTop: "10px"}}>
                        您当前正在使用的是uRule开源版本，Github地址为：<a href="https://github.com/youseries/urule"
                                                          target="_blank">https://github.com/youseries/urule</a>
                    </div>
                </div>

                <div style={{marginTop: "20px", marginBottom: "10px"}}>
                    <span className="card-title">我们的优势</span>
                </div>
                <div>
                    <Layout.Row gutter="10" style={{marginBottom: "10px"}}>
                        <Layout.Col span="6">
                            <Card style={{minHeight: "240px"}}>
                                <Layout.Row gutter="0" style={{marginTop: "-10px"}}>
                                    <Layout.Col span="6">
                                        <div className="card-panel-icon">
                                            <i className="rf rf-type" style={{fontSize: '24pt'}}></i>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="18">
                                        <div className="card-panel-title">
                                            降低软件项目成本
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                                <Layout.Row gutter="0">
                                    <Layout.Col span="24">
                                        <div className="card-panel-text">
                                            &nbsp; &nbsp; &nbsp; &nbsp;URULE
                                            可将商业逻辑与软件代码相分享，有利于项目的设计人员和需求分析人员直接进行项目的编码工作，而减少了程序员的介入，使项目的开发成本得到控制，同时减少了沟通和文档的时间成本。
                                            引入URULE
                                            规则引擎的企业项目在维护的过程中，针对业务规则的维护，可以脱离出来，直接由业务人员进行维护。而其他功能的维护的工作量也明显减少，一个程序员可以同时维护多个项目，有利于节约企业成本。
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                            </Card>
                        </Layout.Col>
                        <Layout.Col span="6">
                            <Card style={{minHeight: "240px"}}>
                                <Layout.Row gutter="0" style={{marginTop: "-10px"}}>
                                    <Layout.Col span="6">
                                        <div className="card-panel-icon">
                                            <i className="rf rf-type" style={{fontSize: '24pt'}}></i>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="18">
                                        <div className="card-panel-title">
                                            缩短项目开发周期
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                                <Layout.Row gutter="0">
                                    <Layout.Col span="24">
                                        <div className="card-panel-text">
                                            &nbsp; &nbsp; &nbsp; &nbsp;URULE规则引擎能够帮助企业迅速开展业务。当一个信息化项目启动之后，快速开发和实施，是决定项目成败的关键因素。
                                            URULE规则引擎适合短平快的开发模式，能够保证项目尽快实施，并且提供项目实施过程中适应企业实际需求的改动空间。
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                            </Card>
                        </Layout.Col>
                        <Layout.Col span="6">
                            <Card style={{minHeight: "240px"}}>
                                <Layout.Row gutter="0" style={{marginTop: "-10px"}}>
                                    <Layout.Col span="6">
                                        <div className="card-panel-icon">
                                            <i className="rf rf-type" style={{fontSize: '24pt'}}></i>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="18">
                                        <div className="card-panel-title">
                                            随需而动 提高企业的竞争力
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                                <Layout.Row gutter="0">
                                    <Layout.Col span="24">
                                        <div className="card-panel-text">
                                            &nbsp; &nbsp; &nbsp; &nbsp;URUL规则引擎可以实现系统在运行时可根据业务系统的变化实时在线修改业务规则，大幅降低业务系统的维护复杂度及成本，实现业务规则的随需而动。
                                            当前社会企业之间的竞争愈发激烈，企业的信息化建设更加是实现了快速迭代，下一秒的市场就会有所不同，业务的频繁变化就需要企业的信息化能够应对这种复杂多变的形式。
                                            URULE能够实现极短时间内响应需求的变化，极大的提供了项目的应变能力，增强了企业的竞争力。
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                            </Card>
                        </Layout.Col>
                        <Layout.Col span="6">
                            <Card style={{minHeight: "240px"}}>
                                <Layout.Row gutter="0" style={{marginTop: "-10px"}}>
                                    <Layout.Col span="6">
                                        <div className="card-panel-icon">
                                            <i className="rf rf-type" style={{fontSize: '24pt'}}></i>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="18">
                                        <div className="card-panel-title">
                                            保障企业资产
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                                <Layout.Row gutter="0">
                                    <Layout.Col span="24">
                                        <div className="card-panel-text">
                                            &nbsp; &nbsp; &nbsp; &nbsp; 很多业务规则是企业的核心竞争力之一，而传统开发模式下这些业务规则被淹没在软件代码中，难以形成积累。
                                            在URULE的帮助下，这些业务规则可以从软件代码中脱离，结合版本管理功能，这部分业务规则可以不断提炼并成为企业的智力资产。
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                            </Card>
                        </Layout.Col>
                    </Layout.Row>

                </div>

                <div style={{marginTop: "20px", marginBottom: "10px"}}>
                    <span className="card-title">核心功能</span>
                </div>
                <div>
                    <Layout.Row gutter="0">
                        <Layout.Col span="8">
                            <Card style={{minHeight: "180px"}}>
                                <Layout.Row gutter="0" style={{marginTop: "-10px"}}>
                                    <Layout.Col span="6">
                                        <div className="card-panel-icon">
                                            <i className="rf rf-rule" style={{fontSize: '24pt'}}></i>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="18">
                                        <div className="card-panel-title">
                                            向导式决策集
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                                <Layout.Row gutter="0">
                                    <Layout.Col span="24">
                                        <div className="card-panel-text">
                                            &nbsp; &nbsp; &nbsp; &nbsp;URULE
                                            决策集也称规则集，在URule Pro当中是由一组普通规则和循环规则构成的规则集合，是使用频率最高、使用方式最为灵活的一种业务规则实现方式。
                                            规则的定义采用向导方式，一步一步通过鼠标点击就可以完成其中的普通规则与循环规则的配置，配合高度可视化的向导式规则设计器，可以最大限度将业务规则可视化，降低规则配置的复杂度。
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                            </Card>
                        </Layout.Col>
                        <Layout.Col span="8">
                            <Card style={{minHeight: "180px"}}>
                                <Layout.Row gutter="0" style={{marginTop: "-10px"}}>
                                    <Layout.Col span="6">
                                        <div className="card-panel-icon">
                                            <i className="rf rf-script" style={{fontSize: '24pt'}}></i>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="18">
                                        <div className="card-panel-title">
                                            脚本式决策集
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                                <Layout.Row gutter="0">
                                    <Layout.Col span="24">
                                        <div className="card-panel-text">
                                            &nbsp; &nbsp; &nbsp; &nbsp;脚本式决策集即采用脚本的方式来定义业务规则，在脚本式规则集中，采用URule自定义的一套脚本语法，关键字既可以使用英文也可以是中文来定义。
                                            因为支持中文关键字，使得URule Pro的脚本式决策集更加适合国人编写，可读性也就更强，再配合URule
                                            Pro中提供的脚本式决策集编辑器中提供的全功能代码提示功能，可大幅提高脚本式决策集的编写效率。
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                            </Card>
                        </Layout.Col>
                        <Layout.Col span="8">
                            <Card style={{minHeight: "180px"}}>
                                <Layout.Row gutter="0" style={{marginTop: "-10px"}}>
                                    <Layout.Col span="6">
                                        <div className="card-panel-icon">
                                            <i className="rf rf-table" style={{fontSize: '24pt'}}></i>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="18">
                                        <div className="card-panel-title">
                                            决策表
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                                <Layout.Row gutter="0">
                                    <Layout.Col span="24">
                                        <div className="card-panel-text">
                                            &nbsp; &nbsp; &nbsp; &nbsp;决策表是一种以表格形式表现规则的工具，它非常适用于描述处理判断条件较多，各条件又相互组合、有多种决策方案的情况，决策表提供精确而简洁描述复杂逻辑的方式，可将多个条件及与这些条件满足后要执行动作以图形化形式进行对应，对于决策表的定义，我们提供的是全可视化、图形化的操作方式，通过简单的鼠标点击就可以快速定义出与业务相匹配的决策表。
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                            </Card>
                        </Layout.Col>
                    </Layout.Row>
                    <Layout.Row gutter="0" style={{marginBottom: "10px"}}>
                        <Layout.Col span="8">
                            <Card style={{minHeight: "180px"}}>
                                <Layout.Row gutter="0" style={{marginTop: "-10px"}}>
                                    <Layout.Col span="6">
                                        <div className="card-panel-icon">
                                            <i className="rf rf-tree" style={{fontSize: '24pt'}}></i>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="18">
                                        <div className="card-panel-title">
                                            决策树
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                                <Layout.Row gutter="0">
                                    <Layout.Col span="24">
                                        <div className="card-panel-text">
                                            &nbsp; &nbsp; &nbsp; &nbsp;决策树又称为规则树，是URule规则引擎中提供的另外一种构建规则的方式，它以一棵躺倒的树形结构来表现规则（之所以将其躺倒是为了节省空间，否则一棵稍微大点的树将会占用很大的页面空间），决策树表现业务规则更为形象，实际上，无论是决策树、决策表还是评分卡，都可以通过决策集来实现，只是，对于某些业务规则来说，通过决策树或决策表或评分卡实现起来更为形象、快捷。
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                            </Card>
                        </Layout.Col>
                        <Layout.Col span="8">
                            <Card style={{minHeight: "180px"}}>
                                <Layout.Row gutter="0" style={{marginTop: "-10px"}}>
                                    <Layout.Col span="6">
                                        <div className="card-panel-icon">
                                            <i className="rf rf-scorecard" style={{fontSize: '24pt'}}></i>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="18">
                                        <div className="card-panel-title">
                                            评分卡
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                                <Layout.Row gutter="0">
                                    <Layout.Col span="24">
                                        <div className="card-panel-text">
                                            &nbsp; &nbsp; &nbsp; &nbsp;评分是对个人或机构的相关信息进行分析之后的一种数值表达，表示此人或此机构由于信用活动的拒付行为所造成损失风险的可能性，评分通常用于对个人或机构的风险管理与评估。
                                            URule中的评分卡就是用来计算评分的，它使用二维表形式展示目标对象的各个属性，针对不同属性设置不同区段的条件，每个区段条件对应不同的分值，运行时引擎会根据定义的区段条件自动计算目标对象的评分。
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                            </Card>
                        </Layout.Col>
                        <Layout.Col span="8">
                            <Card style={{minHeight: "180px"}}>
                                <Layout.Row gutter="0" style={{marginTop: "-10px"}}>
                                    <Layout.Col span="6">
                                        <div className="card-panel-icon">
                                            <i className="rf rf-flow" style={{fontSize: '24pt'}}></i>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="18">
                                        <div className="card-panel-title">
                                            决策流
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                                <Layout.Row gutter="0">
                                    <Layout.Col span="24">
                                        <div className="card-panel-text">
                                            &nbsp; &nbsp; &nbsp; &nbsp;规则流又称决策流，它整个的结构类似于工作流，用来对已有的决策集、决策表、交叉决策表、决策树、评分卡、复杂评分卡或其它决策流的执行顺序进行编排，以清晰直观的实现一个大的复杂的业务规则。
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                            </Card>
                        </Layout.Col>
                    </Layout.Row>
                </div>

                <div style={{marginTop: "20px", marginBottom: "10px"}}>
                    <span className="card-title">报表中心</span>
                </div>
                <div>
                    <Layout.Row gutter="10" style={{marginBottom: "10px"}}>
                        <Layout.Col span="10">
                            <Card style={{minHeight: "300px"}} header={
                                <div className="clearfix card-report-title">
                                    <span>项目统计</span>
                                </div>
                            }>
                                <div id="myPieChart" style={{width: '90%', height: 300,marginLeft:'-10px'}}></div>
                            </Card>
                        </Layout.Col>
                        <Layout.Col span="14">
                            <Card style={{minHeight: "300px"}} header={
                                <div className="clearfix card-report-title">
                                    <span>项目规则文件分类统计</span>
                                </div>
                            }>
                                <div id="myBarChart" style={{width: '90%', height: 300,marginLeft:'-30px'}}></div>
                            </Card>
                        </Layout.Col>

                    </Layout.Row>

                </div>

            </div>
        );
    }
};
